<template>
  <el-dialog
    :visible.sync="dialog"
    title="订单详情"
    width="800"
    top="5vh"
  >
    <section ref="print">
      <el-form :data="orderDetail" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：">
              <span>{{ orderDetail.orderSn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单状态：">
              <el-tag>{{ orderDetail.status | formatStatus }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单用户：">
              <span>{{ orderDetail.nickName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理等级：">
              <span>{{ orderDetail.levelName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="买家留言：">
              <span>{{ orderDetail.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="下单时间：">
              <span>{{ orderDetail.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付方式：">
              <span>{{ orderDetail.payType | formatPayType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付时间：">
              <span>{{ orderDetail.payTime === undefined ? "暂无" : orderDetail.payTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品信息：">
          <el-table
            :data="orderDetail.itemList"
            border
            fit
            highlight-current-row
            :header-cell-style="{background: '#F2F6FC',color: '#303133'}"
          >
            <el-table-column align="center" label="商品货号" prop="productId">
              <template slot-scope="scope">
                NO：{{ scope.row.productId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品图片" prop="productImage">
              <template slot-scope="scope">
                <img :src="scope.row.productImage" style="width: 40px; height: 40px;margin:0;cursor: pointer">
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称" prop="productName"/>
            <el-table-column align="center" label="商品价格(元)" prop="price"/>
            <el-table-column align="center" label="购买数量" prop="num"/>
          </el-table>
        </el-form-item>
        <el-form-item label="收货信息：">
          <br>
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">手机号</el-col>
            <el-col :span="12" class="table-cell-title">地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ orderDetail.receiverName }}</el-col>
            <el-col :span="6" class="table-cell">{{ orderDetail.receiverPhone }}
            </el-col>
            <el-col :span="12" class="table-cell">{{ orderDetail.receiverProvince }}&nbsp;
              {{ orderDetail.receiverCity }}&nbsp;{{ orderDetail.receiverRegion }}&nbsp;
              {{ orderDetail.receiverDetailAddress }}
            </el-col>
          </el-row>

        </el-form-item>
        <el-form-item label="费用信息：">
          <br>
          <el-row>
            <el-col :span="8" class="table-cell-title">商品总价</el-col>
            <el-col :span="8" class="table-cell-title">快递费用</el-col>
            <el-col :span="8" class="table-cell-title">实付金额</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">{{ orderDetail.totalAmount }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.freightAmount }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.payAmount }}</el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="orderDetail.deliveryCompany!==undefined" label="快递信息：">
          <br>
          <el-row>
            <el-col :span="8" class="table-cell-title">物流渠道</el-col>
            <el-col :span="8" class="table-cell-title">物流单号</el-col>
            <el-col :span="8" class="table-cell-title">发货时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">{{ orderDetail.deliveryCompany }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.deliverySn }}</el-col>
            <el-col :span="8" class="table-cell">{{ orderDetail.deliveryTime }}</el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="追溯信息：">
          <br>
          <el-row>
            <el-col :span="6" class="table-cell-title">商品货号</el-col>
            <el-col :span="6" class="table-cell-title">商品名称</el-col>
            <el-col :span="6" class="table-cell-title">追溯码</el-col>
            <el-col :span="6" class="table-cell-title">追溯时间</el-col>
          </el-row>
          <el-row v-for='(goodsTraceBack, index) in orderDetail.goodsTraceBackList' :key='index'>
            <el-col :span="6" class="table-cell">NO.{{ goodsTraceBack.goodsId }}</el-col>
            <el-col :span="6" class="table-cell">
              <template v-for='orderItem in orderDetail.itemList'>
                <span v-if='orderItem.productId === goodsTraceBack.goodsId'>{{ orderItem.productName }}</span>
              </template>
            </el-col>
            <el-col :span="6" class="table-cell">{{ goodsTraceBack.goodsCode }}</el-col>
            <el-col :span="6" class="table-cell">{{ goodsTraceBack.createTime }}</el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </section>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  filters: {
    formatStatus(value) {
      if (value === 0) {
        return '待付款'
      } else if (value === 1) {
        return '待出库'
      } else if (value === 2) {
        return '待发货'
      } else if (value === 3) {
        return ' 待收货'
      } else if (value === 4) {
        return '已完成'
      } else if (value === 5) {
        return '已取消'
      } else if (value === -1) {
        return '申请退货'
      } else if (value === -2) {
        return '确认退货'
      } else if (value === -3) {
        return '拒绝退货'
      }
    },
    formatPayType(value) {
      if (value === 0) {
        return '余额'
      } else if (value === 1) {
        return '微信'
      } else if (value === 2) {
        return '支付宝'
      } else if (value === 3) {
        return ' 银行卡'
      } else if (value === undefined) {
        return '暂无'
      }
    }
  },
  data() {
    return {
      dialog: false,
      orderDetail: {
        orderSn: null,
        status: 0,
        nickName: null,
        receiverName: null,
        receiverPhone: null,
        receiverDetailAddress: null,
        goodsTraceBackList: [],
        itemList: [],
        createTime: null,
        payTime: null,
        payAmount: null,
        freightAmount: null,
        totalAmount: null,
        payType: 0,
        deliveryCompany: null,
        deliverySn: null,
        deliveryTime: null,
        receiverProvince: null,
        receiverCity: null,
        receiverRegion: null,
        levelNameL: null
      }
    }
  }
}
</script>

<style scoped lang="scss">
.table-layout {
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell-title {
  height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 5px;
  background: #F2F6FC;
  text-align: center;
  font-size: 13px;
  color: #303133;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 13px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.container {
  height: calc(100% - 80px);
  position: absolute;
  overflow: auto;
  width: calc(100% - 20px);

  .order-caculate {
    font-size: 14px;
    color: #909399;
    border-top: 1px solid #f0f0f0;
    padding: 20px 10px;

    .caculate-title {
      display: inline-block;
      margin-right: 50px;
    }

    .caculate-num {
      font-size: 20px;
      color: #ff4949;
    }
  }

  .el-table th {
    background-color: #fafafa;
  }
}

.footer-contains {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  background-color: #f6f6f6;
  bottom: 0;
  flex-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  padding: 0 20px 0 13px;
}

/*打印单样式编辑*/
.order-list {
  /*  height: 297mm;*/
  margin: 0 auto;
  width: 210mm;

  .order-title {
    height: 16mm;
    line-height: 16mm;
    font-size: 8mm;
    font-weight: bolder;
    text-align: center;
  }

  .order-info {
    span {
      display: inline-block;
      padding: 0 0 10px 0;
      font-size: 3mm;
    }

    span.info {
      width: 60mm;
    }
  }

  .el-table--small th, .el-table--small td {
    padding: 4px 0;
  }
}

/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}

</style>
